<template>
	<view>
		<view style="position: fixed;width: 100%;z-index: 9;height: 190rpx;background-color: #ffffff;">
			<view class="" style="padding: 25rpx 20rpx">
				<u-subsection :fontSize="30" :list="feeModelList" :current="(feeModel-1)" @change="feeModelChange"></u-subsection>
				<!-- 一星期的天数点击 -->
				<view>
					<u-tabs  
        :activeStyle="{
            color: '#303133',
            fontWeight: 'bold'
        }"   :list="weekList" keyName="title" @click="weekClick"></u-tabs>
				</view>
			</view>
		</view>
		
		<view class="" style="padding-bottom: 120rpx;padding-top: 190rpx;">
			<!-- 显示时间段费用 -->
			<view style="padding: 10rpx;">
				
				<view v-if="currentWeek.data.length <= 0">
					<view class="nullData">
						<view>
							<image src="../../../../static/image/notdata.png" class="nullImage"></image>
						</view>
						<view class="nullText">
							暂无记录
						</view>
					</view>
				</view>
				<view v-else >
					<view  v-for="(timeItem, timeIndex) in currentWeek.data" :key="timeIndex" >
						<view style="padding: 10rpx;">
							<view style="background-color: #ffffff;border-radius: 12rpx;margin-top: 15rpx;box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.12)">
								<view style="padding: 15rpx 15rpx;border-bottom: 1px solid #e5e5e5 ;">
									{{ timeItem.startTime.substr(0,5)+' - '+timeItem.endTime.substr(0,5) }}
								</view>
								<view style="padding: 10rpx 15rpx;">
									<view>费用：￥{{ timeItem.amount }}</view>
									<view v-if="feeModel == 2">
										余票：{{ timeItem.maxSale }} 张
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view style="width: 100%;position: fixed;bottom: 0px;z-index: 10;height: 120rpx;">
			<view style="padding: 10rpx 25rpx;">
				<u-button text="设置费用" @click="onLink('/pagesWorkbenches/pages/venueLocation/costEdit/costEdit?feeModel='+feeModel+'&id='+venueLocationId+'&week='+currentWeek.week)" color="#155CCF"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//场地ID
				venueLocationId: '',
				//收费模式(1:按时段预约收费 2:按单次收费)
				feeModel: 1,
				feeModelList:['时间段费用', '票制费用'],
				//周一到周日
				weekList: [
					{
						key: 1,
						title: '周一'
					},
					{
						key: 2,
						title: '周二'
					},
					{
						key: 3,
						title: '周三'
					},
					{
						key: 4,
						title: '周四'
					},
					{
						key: 5,
						title: '周五'
					},
					{
						key: 6,
						title: '周六'
					},
					{
						key: 7,
						title: '周日'
					}
				],
				//当前选择的星期和值
				currentWeek: {
					week: 1,
					data: []
				}
			}
		},
		onLoad(option) {
			//知识ID
			var venueLocationId = option.id;
			this.venueLocationId = venueLocationId;
		},
		onShow() {
			this.getLocationCostList();
		},
		methods: {
			//获取费用列表
			getLocationCostList(){
				this.currentWeek.data = [];
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var params = {};
				params.venueLocationId = this.venueLocationId;
				params.week = this.currentWeek.week;
				params.feeModel = this.feeModel.toString();
				this.$request({
					url: '/blade-merchant-app/merchant-app/venue-location/get-location-cost-list',
					type: 'POST',
					data: params
				}).then(res => {
					uni.hideLoading();
					this.currentWeek.data = res.data;
				}).catch(err =>{
					
				})
			},
			//切换费用类型
			feeModelChange(e){
				this.feeModel = (e+1)
				this.getLocationCostList();
			},
			//点击星期事件
			weekClick(e){
				this.currentWeek.week = e.key;
				//获取某个星期的费用设置
				this.getLocationCostList();
			},
			//删除费用
			deleteLocationCost(id) {
				var that = this;
				uni.showModal({
				   title: '删除操作',
				   content: '是否确认删除此节点费用？',
				   showCancel: true,
				   success: function (res) {
					   if (res.confirm) {
							uni.showLoading({
								title: '操作中',
								mask: true
							})
							that.$request({
								url: `/blade-merchant-app/merchant-app/venue-location/batch-delete-location-cost`,
								type: 'POST',
								data: {
									ids: id
								}
							}).then(res => {
								setTimeout(()=>{
									uni.hideLoading();
									that.fetchList();
								},800)
							}).catch(err =>{
								uni.hideLoading();
							})
					   }
				   }
				});
			},
			onLink(url) {
				uni.navigateTo({ url: url })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
		
		.bg-f1f1f1 {
			background: #f1f1f1;
		}
		
		.height30 {
			height: 30rpx;
		}
		
		.venueForm {
			padding: 30rpx;
			background-color: #ffffff;
			position: sticky;
			
			.textareaTitle {
				padding-bottom: 20rpx;font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;
				
				.required {
					color: red;
				}
			}
			
			.form-row {
				border-radius: 0rpx;display: flex;border: 1px solid #c3c3c3;justify-content: center;align-items: center; 
				
				.ftitle {
					text-align: center;
					font-size: 30rpx;
					width: 180rpx;
					display: inline-table;
					color: #333333;
					padding:0rpx 10rpx;
					
					.required {
						color: red;
					}
				}
				.fvalue {
					height: 90rpx;width: 100%;font-size: 32rpx;line-height: 90rpx;
				}
			
			}
			
			.submitBtn {
				height: 90rpx;background-color: #0544ab;color: #ffffff;line-height: 90rpx;font-size: 32rpx;
			}
			
		}
		
		.nullData {
			height: 100%;
			text-align: center;
			padding-top: 10%;
			
			.nullImage {
				width: 220rpx;height: 220rpx;
			}
			.nullText {
				color:#666666;font-size:29rpx;padding-top:15rpx;text-align: center;
			}
			
		}
		
	}

</style>
